 //在页面所有dom元素加载完毕后才执行这里的代码
	/*功能
	1、点击两个控制按钮能够切换图片，切换图片的时候指示器随着图片变化改变
	2、点击指示器也会切换到对应的图片
	3、自动轮播图片，鼠标放到轮播区域中自动轮播就会停止，鼠标出了轮播区域，
	   重新启动自动轮播
	 实现：
	 1、写结构的时候，让所有图片重叠在一起，并且都消失掉  
	  2、给图片定义一个类名active 谁拿到这个类名谁就会出现 
	  3、同时只能给一个图片发这个类名，怎么控制，借用一个变量index
	*/
	//获取元素
	let cwrap = document.querySelector('.carousel');
	let prevBtn = cwrap.querySelector('.cleft');//向前按钮
	let nextBtn = cwrap.querySelector('.cright');//向后按钮
	let olis = cwrap.querySelectorAll('.image-list>li');//图片s
	let pointers = cwrap.querySelectorAll('.pointer>li');//点
	let index = 0;
	let timer = null;
	//清除类名的函数
	function clearClassName (){
		//重置还原所有的图片和小点指示器的类名
		for (let i = 0; i < olis.length; i++) {
			olis[i].className = 'img-item';
			pointers[i].classList.remove('point-active');
		}
	}
	function next(){  //向后切换图片方法
		if (index >= olis.length-1) { //判断如果index超出图片索引数量，重置
			index = 0;
		} else{
		index++;
		}
		clearClassName ();//重置还原所有的图片的类名
		// 然后单独给某一个指定的图片添加显示类名
		olis[index].className = 'img-item active';
		pointers[index].classList.add('point-active')
	}
	function prev(){//向前切换图片方法
		if (index <= 0) { //判断如果index超出图片索引数量，重置
			index = olis.length-1;
		} else{
		index--;
		}
		clearClassName ();//重置还原所有的图片的类名
		// 然后单独给某一个指定的图片添加显示类名
		olis[index].className = 'img-item active';
		pointers[index].classList.add('point-active')
	}
	
	function pointerChange(){
		//指示器小点切换图片方法
		let ponintIndex = this.getAttribute('data-index');
		clearClassName ()//重置还原所有的图片和小点指示器的类名
		olis[ponintIndex].className = 'img-item active';
		this.classList.add('point-active')
	}
	for (let i = 0; i < pointers.length; i++) {
		//通过循环遍历为每一个小点添加一个点击事件监听，点击了执行对应的方法
		pointers[i].addEventListener('click',pointerChange)
	}
	
	function addtimer(){//添加计时器的方法
		timer = setInterval(next,2000); //每隔两秒执行以下next方法
	}
	function removetimer(){//删除计时器的方法
		clearInterval(timer);
	}
	
	addtimer();
	//nextBtn.onclick = next;
	nextBtn.addEventListener('click',next);
	prevBtn.addEventListener('click',prev);
	cwrap.addEventListener('mouseenter',removetimer);
	cwrap.addEventListener('mouseleave',addtimer);
	
